<template>
  <cs-container>
    <div class="review-info" v-if="type==1">
      <el-col :span="12" :offset="6">
        <el-form class="form"  ref="form" :model="form" :rules="formRules" label-position="left" label-width="180px">
          <div class="form-title">基本信息</div>
          <div class="form-panel">
            <el-form-item label="入驻人姓名" prop="contact_name">
              <el-input v-model="form.contact_name"></el-input>
            </el-form-item>
            <el-form-item label="入驻人邮箱"  prop="contact_email">
              <el-input v-model="form.contact_email"></el-input>
            </el-form-item>
            <el-form-item label="入驻人手机号码" prop="contact_mobile">
              <el-input v-model="form.contact_mobile"></el-input>
            </el-form-item>
            <el-form-item label="入驻人身份证号码" prop="id_card_number">
              <el-input v-model="form.id_card_number"></el-input>
            </el-form-item>
            <el-form-item label="身份证人面像" prop="id_card_face">
              <img class="image-horizontal" :src="form.id_card_face">
            </el-form-item>
            <el-form-item label="身份证国徽面" prop="id_card_emblem">
              <img class="image-horizontal" :src="form.id_card_emblem">
            </el-form-item>
            <el-form-item label="手持身份证半身照片" prop="id_card_handheld">
              <img class="image-vertical" :src="form.id_card_handheld">
            </el-form-item>
          </div>
          <div class="form-title">店铺信息</div>
          <div class="form-panel">
            <el-form-item label="店铺名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺简称" prop="short_name" >
              <el-input v-model="form.short_name"></el-input>
            </el-form-item>
            <el-form-item label="店铺描述" prop="description">
              <el-input type="textarea" :rows="4" v-model="form.description"></el-input>
            </el-form-item>
          </div>
          <div class="action">
            <el-button class="btn-preview" :disabled="btnDisabled"  type="primary" @click="handleReview">审核</el-button></el-button>
          </div>
        </el-form>
      </el-col>
    </div>
    <div class="review-info" v-else>
      <el-col :span="12" :offset="6">
        <el-form class="form"  ref="form" :model="form" :rules="formRules" label-position="left" label-width="180px">
          <div class="form-title">入驻企业信息</div>
          <div class="form-panel">
            <el-form-item label="企业营业执照" prop="business_license">
              <img class="image-vertical" :src="form.business_license">
            </el-form-item>
            <el-form-item label="统计机构信用代码" prop="credit_code">
              <el-input v-model="form.credit_code"></el-input>
            </el-form-item>
            <el-form-item label="企业名称" prop="company_name">
              <el-input v-model="form.company_name"></el-input>
            </el-form-item>
            <el-form-item label="经营期限" prop="license_start">
              <el-date-picker
                v-model="expired"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format ="yyyy-MM-dd"
                @change = "handleDataChange"
                >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="所在地区" prop = "business_province">
              <cs-region-select v-model="region"/>
            </el-form-item>
            <el-form-item label="详细地址" prop="business_address">
              <el-input v-model="form.business_address"></el-input>
            </el-form-item>
            <el-form-item label="法人姓名" prop="person_name">
              <el-input v-model="form.person_name"></el-input>
            </el-form-item>
            <el-form-item label="法人手机号码" prop="contact_mobile">
              <el-input v-model="form.contact_mobile"></el-input>
            </el-form-item>
            <el-form-item label="法人身份证号码" prop="id_card_number">
              <el-input v-model="form.id_card_number"></el-input>
            </el-form-item>
            <el-form-item label="身份证人面像" prop="id_card_face">
              <img class="image-horizontal" :src="form.id_card_face">
            </el-form-item>
            <el-form-item label="身份证国徽面" prop="id_card_emblem">
              <img class="image-horizontal" :src="form.id_card_emblem">
            </el-form-item>
            <el-form-item label="手持身份证半身照片" prop="id_card_handheld">
              <img class="image-vertical" :src="form.id_card_handheld">
            </el-form-item> 
          </div>
          <div class="form-title">店铺信息</div>
          <div class="form-panel">
            <el-form-item label="店铺名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺简称" prop="short_name">
              <el-input v-model="form.short_name"></el-input>
            </el-form-item>
            <el-form-item label="店铺描述" prop="description">
              <el-input type="textarea" :rows="4" v-model="form.description"></el-input>
            </el-form-item>
          </div>
          <div class="form-title">商户审核</div>
          <div class="form-panel">
            <el-form-item label="审核意见" prop="review_status">
              <el-select v-model="review_status" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审核意见" prop="review_content">
              <el-input type="textarea" :rows="4" v-model="review_content"></el-input>
            </el-form-item>
          </div>  
          <div class="action">
            <el-button class="btn-preview" :disabled="btnDisabled" type="primary" @click="handleReview">审核</el-button>
          </div>
        </el-form>
      </el-col>  
    </div>
    <br style='clear:both'/>
  </cs-container>
</template>

<script>
import util from '@/utils/util'
import { mapState } from 'vuex'
import csRegionSelect from '@/components/cs-region-select'
import { getShopItem, reviewShopItem} from '@/api/shop/shop'  
export default {
  name: 'shop_review',
  components: {
    csRegionSelect
  },
  data() {
    return {
      shop_id: '',
      expired: '',
      region: [],
      review_status: '',
      review_content: '',
      form: {
        shop_type: '',
        contact_name: '',
        contact_telephone: '',
        contact_mobile: '',
        contact_email: '',
        id_card_number: '',
        id_card_face: '',
        id_card_emblem: '',
        id_card_handheld: '',
        company_name: '',
        credit_code: '',
        business_license: '',
        license_start: '',
        license_end: '',
        business_province: '',
        business_city: '',
        business_district: '',
        business_address: '',
        person_name: '',
        name: '',
        short_name: '',
        description: ''
      },
      options: [
        {
          value: 3,
          label: '审核通过'
        },
        {
          value: 1,
          label: '审核不通过'
        },
        {
          value: 4,
          label: '拒接'
        }
      ]
    }
  },
  created() {
    this.shop_id = this.$route.params.shop_id
    this.getShopInfo()
  },
  methods: {
    getShopInfo() {
      if(this.shop_id>0){
        getShopItem(this.shop_id).then(response => {
          if(response.data) {
            this.shop_id = response.data.shop_id
            this.type = response.data.shop_type
            this.form.shop_type = response.data.shop_type
            this.form.contact_name = response.data.contact_name
            this.form.contact_telephone = response.data.contact_telephone
            this.form.contact_email = response.data.contact_email
            this.form.contact_mobile = response.data.contact_mobile
            this.form.id_card_number = response.data.id_card_number
            this.form.id_card_face = response.data.id_card_face
            this.form.id_card_emblem = response.data.id_card_emblem
            this.form.id_card_handheld = response.data.id_card_handheld
            this.form.business_license = response.data.business_license
            this.form.company_name = response.data.company_name
            this.form.credit_code = response.data.credit_code
            this.form.license_start = response.data.license_start
            this.form.license_end = response.data.license_end
            this.form.business_address = response.data.business_address
            this.form.person_name = response.data.person_name
            this.form.name = response.data.name
            this.form.short_name = response.data.short_name
            this.form.description = response.data.description
            this.review = response.data.review_status
            this.review_content = response.data.review_content
            this.msgShow = true
            this.step = 2
            if(response.data.license_start && response.data.license_end){
              let start = new Date(response.data.license_start)
              let end = new Date(response.data.license_end)
              this.expired = [start, end]
            }
            if(response.data.business_province && response.data.business_city && response.data.business_district){
              this.region.push(parseInt(response.data.business_province))
              this.region.push(parseInt(response.data.business_city))
              this.region.push(parseInt(response.data.business_district))
            }
          }
        })
      }
    },
    handleReview() {
      reviewShopItem({ shop_id: this.shop_id,
        review_status:this.review_status, 
        review_content: this.review_content}).then(res => {
          if(res.data) {
            this.$alert('操作成功', '提示', {
              confirmButtonText: '确定',
              center: true
            }).then(() => {
              this.$router.push('/merchant/admin/list')
            });
          }
      }).finally(() => {
          this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">
  .review-info{
    margin:0 auto;
    .form-title {
      font-size:  20px;
      padding: 16px 16px 16px 32px;
      border-bottom: 1px solid #f1eeee;
    }
    .form-panel {
      padding: 30px 0;
      width: 60%;
      margin: 0 auto;
    }
    .image-vertical {
      width: 120px;
      height: 160px;
    }
    .image-horizontal {
      width: 160px;
      height: 90px;
    }
    .action {
      text-align: center;
      .btn-preview{
        width: 10%;
      }
    }
  }
</style>